<template>
  <a-modal
    :visible="visible"
    width="900px"
    title="选人"
    :maskClosable="false"
    :bodyStyle="{ overflow: 'auto', maxHeight: '64vh' }"
    @cancel="handleCancel"
    @ok="handleSubmit"
  >
    <a-spin :spinning="spinning">
      <a-row :gutter="10" class="m-b-10">
        <a-col :span="12">
          <a-card :bodyStyle="{ height: '360px', overflow: 'auto' }">
            <a-tree :load-data="onLoadData" :tree-data="treeData" @select="handleOnSelect" />
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card :bodyStyle="{ height: '360px', overflow: 'auto' }">
            <!-- <div class="m-b-6">
              <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>
            </div>
            <a-checkbox-group v-model="checkedList" @change="handleOnChange">
              <div class="m-b-6" v-for="(item, index) in departmentPeopleData" :key="index">
                <a-checkbox :value="item.value">{{ item.title }}</a-checkbox>
              </div>
            </a-checkbox-group> -->
            <!-- <div v-show="departmentPeopleData" v-for="(item, index) in departmentPeopleData" :key="index" class="m-b-6">
              <a href="javascript:;" @click="handleChoose(item)">{{ item.title }}</a>
            </div> -->
            <a-list :split="false" item-layout="horizontal" :data-source="departmentPeopleData.list">
              <a-list-item slot="renderItem" slot-scope="item" @click="handleChoose(item)">
                <a-list-item-meta class="p-t-10">
                  <a slot="title" href="javascript:;">{{ item.title }} - {{ item.another }}</a>
                  <a-avatar slot="avatar" shape="square">{{ item.title.substr(0, 1) }}</a-avatar>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
      <a-card :bodyStyle="{ padding: '4px 6px' }">
        <a-tag
          v-show="chooseData.length"
          v-for="(j, index) in chooseData"
          :key="index"
          closable
          class="m-b-4"
          @close="() => handleRemove(j)"
        >{{ j.LevelUserStation }} - {{ j.phone }}</a-tag
        >
        <a-empty v-show="!chooseData.length"></a-empty>
      </a-card>
    </a-spin>
  </a-modal>
</template>

<script>
import { getTreeEnable } from '@/api/common'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      spinning: false,
      checkedList: [],
      indeterminate: false,
      checkAll: false,
      treeData: [],
      chooseData: [],
      // 构造部门数据
      departmentPeopleData: {
        LevelDeptID: '',
        LevelDeptName: '',
        list: []
      }
    }
  },
  mounted () {
    this.fetchData()
  },
  watch: {
    defaultValue: {
      deep: true,
      immediate: true,
      handler (n) {
        this.chooseData = n
      }
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      getTreeEnable({
        mode: 'dept',
        PID: ''
      })
        .then((res) => {
          this.treeData = res
        })
        .catch(() => {
          this.$message.error('网络貌似出了点问题，请稍后重试')
        })
        .finally(() => {
          this.spinning = false
        })
    },
    onLoadData (treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve()
          return
        }
        getTreeEnable({
          mode: 'dept',
          PID: treeNode.value
        }).then((res) => {
          treeNode.dataRef.children = res
          this.treeData = [...this.treeData]
          resolve()
        })
      })
    },
    handleOnSelect (checkedKeys, e) {
      this.departmentPeopleData.LevelDeptID = e.node.value
      this.departmentPeopleData.LevelDeptName = e.node.title
      getTreeEnable({
        mode: 'bmry',
        PID: checkedKeys[0]
      })
        .then((res) => {
          this.departmentPeopleData.list = res
        })
        .catch(() => {
          this.$message.error('网络貌似出了点问题，请稍后重试')
        })
    },
    handleChoose (row) {
      if (this.$isEmpty(row.another)) {
        this.$message.error('电话号码为空，请手动添加人员！')
        return
      }
      const index = this.chooseData.findIndex((item) => {
        // const sameUserID = item.LevelUserID === row.value
        const samePhone = item.phone === row.another
        if (samePhone) {
          this.$message.error('存在相同电话号码，请检查已添加数据！')
        }
        return samePhone
      })
      if (index === -1) {
        // this.chooseData = []
        this.chooseData.push({
          LevelDeptID: this.departmentPeopleData.LevelDeptID,
          LevelDeptName: this.departmentPeopleData.LevelDeptName,
          LevelUserStation: row.title,
          LevelUserID: row.value,
          phone: row.another
        })
      }
    },
    // handleOnChange (checkedList) {
    //   this.indeterminate = !!checkedList.length && checkedList.length < this.departmentPeopleData.length
    //   this.checkAll = checkedList.length === this.departmentPeopleData.length
    //   this.test()
    // },
    // onCheckAllChange (e) {
    //   Object.assign(this, {
    //     checkedList: e.target.checked ? this.departmentPeopleData.map(item => item.value) : [],
    //     indeterminate: false,
    //     checkAll: e.target.checked
    //   })
    //   this.test()
    // },
    // test () {
    //   this.departmentPeopleData.forEach(i => {
    //     this.checkedList.forEach(j => {
    //       if (i.value === j) {
    //         this.chooseData.push(i)
    //       }
    //     })
    //   })
    // },
    handleRemove (removedTag) {
      const tags = this.chooseData.filter((tag) => tag !== removedTag)
      this.chooseData = tags
    },
    handleSubmit () {
      this.$emit('success', this.chooseData)
      this.handleCancel()
    },
    handleCancel () {
      // this.chooseData = []
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-list-item-meta-title {
  margin-top: 4px;
}
</style>
